<template>
  <div class="widget-picker-container">
    <div
      v-for="(config, idx) in widgetConfig" :key="idx"
      :draggable="true"
      :style="{flexGrow: `${config.grow ? 1 : 0}`}"
      class="widget-picker-content"
      @dragstart="dragStart(config)"
      @dragend="dragEnd">
      <el-tooltip  placement="top" :open-delay="300">
        <template #content>
          <a :href="config.url" target="_blank" style="color: #fff">{{config.label}}</a>
        </template>
        <div class="position-relative" v-if="config.type === 'atomic'">
          <!--原子组件-->
          <div v-if="config.category === 'text'" class="widget-picker-item">
            <div class="font-size-16 text-align-center">文本</div>
          </div>
          <div v-else-if="config.category === 'image'" class="widget-picker-item">
            <el-image style="width: 60px; height: 60px" :src="require('@/assets/img/empty-state.png')"></el-image>
          </div>
          <div v-else-if="config.category === 'icon'" class="widget-picker-item">
            <i class="iconfont icon-tianjia font-size-20"></i>
          </div>
          <div v-else-if="config.category === 'indicator'" class="widget-picker-item">
            <i class="el-icon-loading font-size-24"></i>
          </div>
          <div v-else-if="config.category === 'point'" class="widget-picker-item">
            <div style="width: 20px; height: 20px; background: #2d69e0; border-radius: 50%;"></div>
          </div>
          <div v-else-if="config.category === 'iconButton'" class="widget-picker-item">
            <el-button type="primary" circle style="width: 40px; height: 40px;">
              <i class="iconfont icon-tianjia"></i>
            </el-button>
          </div>
          <div v-else-if="config.category === 'iconTextButton'" class="widget-picker-item">
            <el-button style="width: 120px; height: 40px; color: #000000; margin: 0 5px;">
              <span class="mar-lft-5">按钮</span>
            </el-button>
          </div>
          <div v-else-if="config.category === 'input'" class="widget-picker-item">
            <el-input value="" placeholder="请输入文本内容" style="width: 130px;"></el-input>
          </div>
          <div v-else-if="config.category === 'inputNumber'" class="widget-picker-item">
            <el-input-number value="" :min="1" :max="100" style="width: 137px;"></el-input-number>
          </div>
          <div v-else-if="config.category === 'switch'" class="widget-picker-item">
            <el-switch :value="true"></el-switch>
          </div>
          <div v-else-if="config.category === 'processor'" class="widget-picker-item">
            <el-progress
              :stroke-width="10" :percentage="50" style="width: 70px"
              :show-text="false" define-back-color="#E5E5E5"></el-progress>
          </div>
          <div v-else-if="config.category === 'level'" class="widget-picker-item level-item">
            <el-progress
              :stroke-width="10" :percentage="50" style="width: 70px"
              :show-text="false" define-back-color="#E5E5E5" status="success"></el-progress>
          </div>
          <div v-else-if="config.category === 'slider'" class="widget-picker-item">
            <el-slider :value="50" vertical :show-tooltip="false" height="70px"></el-slider>
          </div>
          <div v-else-if="config.category === 'dateTime'" class="widget-picker-item">
            <div class="font-size-16 text-align-center">{{timeValue}}</div>
          </div>
          <div v-else-if="config.category === 'hDivider'" class="widget-picker-item">
            <div style="width: 60px; height: 1px; background: #CCCCCC"></div>
          </div>
          <div v-else-if="config.category === 'vDivider'" class="widget-picker-item">
            <div style="width: 1px; height: 60px; background: #CCCCCC"></div>
          </div>
          <div v-else-if="config.category === 'container'" class="widget-picker-item">
            <div style="width: 60px; height: 60px; background: white;"></div>
          </div>
          <div v-else-if="config.category === 'circleClock'" class="widget-picker-item">
            <el-image style="width: 60px; height: 60px" :src="require('@/assets/img/clock.png')"></el-image>
          </div>
          <div v-else-if="config.category === 'selectInput'" class="widget-picker-item">
            <el-select v-model="selectValue" placeholder="请选择" style="width: 130px;">
              <el-option
                label="选项1"
                value="0">
              </el-option>
            </el-select>
          </div>
          <div v-else-if="config.category === 'tabBarPage'" class="widget-picker-item">
            <div class="width-100 flex-justify-between pad-lft-rgt-20">
              <div class="flex-1 color-primary text-align-center" style="height: 40px; line-height: 40px;">
                <span class="font-size-14 font-color-white">标签页</span>
              </div>
              <div class="flex-1 text-align-center" style="height: 40px; line-height: 40px; background: #f7f8fa;">
                <span class="font-size-14">标签页</span>
              </div>
            </div>
          </div>
          <div v-else-if="config.category==='scroll'" class="widget-picker-item">
            <div style="width: 70px; height: 70px; background: white; overflow: scroll"></div>
          </div>
          <div v-else-if="config.category==='listView'" class="widget-picker-item">
            <el-image style="width: 60px; height: 60px" :src="require('@/assets/img/list.png')"></el-image>
          </div>
          <div v-else-if="config.category==='gridView'" class="widget-picker-item">
            <el-image style="width: 60px; height: 60px" :src="require('@/assets/img/grid.png')"></el-image>
          </div>
          <div v-else-if="config.category === 'qrCode'" class="widget-picker-item">
            <el-image style="width: 50px; height: 50px" :src="require('@/assets/img/qrCode.png')"></el-image>
          </div>
          <div v-else-if="config.category === 'buttonList'" class="widget-picker-item">
            <div class="width-100 flex-justify-between pad-lft-rgt-20">
              <div class="flex-1 color-primary text-align-center" style="height: 40px; line-height: 40px;">
                <span class="font-size-14 font-color-white">按钮1</span>
              </div>
              <div class="flex-1 text-align-center" style="height: 40px; line-height: 40px; background: #f7f8fa;">
                <span class="font-size-14">按钮2</span>
              </div>
            </div>
          </div>
          <div v-else-if="config.category==='dragLayout'" class="widget-picker-item">
	          <el-image style="width: 60px; height: 60px" :src="require('@/assets/img/drag.png')"></el-image>
          </div>
          <div v-else-if="config.category==='pageView'" class="widget-picker-item">
            <el-image style="width: 60px; height: 60px" :src="require('@/assets/img/pageView.png')"></el-image>
          </div>
          <div class="widget-picker-mask"></div>
        </div>
      </el-tooltip>
      <div class="position-relative" v-if="config.type === 'componentFunction'">
        <!--功能组件-->
        <div class="widget-picker-item">
          <div class="font-size-12 font-weight-bold">{{config.label}}</div>
        </div>
        <div class="widget-picker-mask"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex';
  import {momentFormat} from "@/config/ide/common";
  export default {
    name: 'AsideWidgetPicker',
    props: {
      widgetType: {
        type: String,
        default: 'atom'
      }
    },
    data() {
      return {
        widgetConfig: [],
        timer: null,
        timeValue: '',
        selectValue: ''
      };
    },
    mounted() {
      this.initData();
    },
    destroyed() {
      clearInterval(this.timer);
      this.timer = null;
    },
    methods: {
      ...mapActions(['updateDraggingWidget']),
      initData() {
        switch (this.widgetType) {
          case 'atom':
            this.updateTimeValue();
            this.startTimer();
            this.widgetConfig = [
              {
                type: 'atomic',
                category: 'text',
                label: '文本',
                url: 'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-SfxUdtwh9oBIWUxBrn1cGj7Zn6e'
              },
              {
                type: 'atomic',
                category: 'image',
                label: '图片',
                url: "https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-BSaBd3Q9MoNg2tx6ob8ctkJtnSI"
              },
              {
                type: 'atomic',
                category: 'icon',
                label: '图标',
                url: "https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-PeywdWZMjolGfcx5yDacefbenhc"
              },
              {
                type: 'atomic',
                category: 'indicator',
                label: '加载圈',
                url: 'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-JJQ8d7mPsoCteYxFoGScGwPjnsb'
              },
              {
                type: 'atomic',
                category: 'point',
                label: '圆点',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-WKpmdQCdPofR7Px6QE5cobGAnch"
              },
              {
                type: 'atomic',
                category: 'iconButton',
                label: '图标按钮',
                url: 'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-IEBndfIeSoiesFxZzNccTrNpn66'
              },
              {
                type: 'atomic',
                category: 'processor',
                label: '进度条',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-C634dmKI7ouGgHxNpZYclrJVnkh"
              },
              {
                type: 'atomic',
                category: 'level',
                label: '数值指示器',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-Ka5fdTzcUowdc8x94YTcoG9Sn7c"
              },
              {
                type: 'atomic',
                category: 'slider',
                label: '滑杆',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-CGMzdnuCfoZC8QxIkBicw2h7n3b"
              },
              {
                type: 'atomic',
                category: 'switch',
                label: '开关',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-UXjedQaKCo3sVzx65EDcMzeinAg"
              },
              {
                type: 'atomic',
                category: 'dateTime',
                label: '日期/时间',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-UZZ2dcDYvoMxC2xBxUjcKaGBnYg"
              },
              {
                type: 'atomic',
                category: 'circleClock',
                label: '时钟',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-BrObdL78joVAuYxvkWfcAtATnXf"
              },
              {
                type: 'atomic',
                category: 'container',
                label: '容器',
                url:'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-WzdFdpEwqo0Ghvxc30Vc2c2Rngb'
              },
              {
                type: 'atomic',
                category: 'hDivider',
                label: '水平分割线',
                url:'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-NiNedBb1Do0Njrx7kf8cpJjWnaf'
              },

              {
                type: 'atomic',
                category: 'vDivider',
                label: '垂直分割线',
                url:'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-NiNedBb1Do0Njrx7kf8cpJjWnaf'
              },

              {
                type: 'atomic',
                category: 'iconTextButton',
                label: '图标文本按钮',
                url: "https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-TLaSdbIymoYrNpxrK2vcACTXnPh",
                grow: true
              },
              {
                type: 'atomic',
                category: 'input',
                label: '输入框',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-WR3Kd50WMoAwEKxJmnDchnpbnpd",
                grow: true,
              },
              {
                type: 'atomic',
                category: 'inputNumber',
                label: '数值输入框',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-B0ABdSRGZooq3rxUVKkc8CpenIc"
              },
              {
                type: 'atomic',
                category: 'selectInput',
                label: '下拉选择框',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-J465dU9SrodavIxhlWBc7eTOnTe",
                grow: true
              },
              {
                type: 'atomic',
                category: 'scroll',
                label: '滚动容器',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-DqJJdiym2oK6rKxTPXzcCw1antc"
              },
              {
                type: 'atomic',
                category: 'listView',
                label: '列表视图',
                url: 'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-AuundSOSPoHW0JxAatwc6JXNnQh',
                grow: true
              },
              {
                type: 'atomic',
                category: 'gridView',
                label: '网格视图',
                url: 'https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-GpA6dHXmNonv1RxIIVTc5LA0ned',
                grow: true
              },
              {
                type: 'atomic',
                category: 'buttonList',
                label: '按钮组',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-WdANdCazNo9yGux6z4GccJX9nvf",
	              grow: true
              },
              {
                type: 'atomic',
                category: 'tabBarPage',
                label: '导航标签页',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-BaRvdLq1Uo6ls4x1PqKcTSp6n3c",
                grow: true
              },
              {
                type: 'atomic',
                category: 'qrCode',
                label: '二维码',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-EqbDdH0vdoGREAx6tlvcgoIYnpf",
	              grow: true
              },
              {
                type: 'atomic',
                category: 'dragLayout',
                label: '拖拽布局',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-JqpAdlxMFo9Vq2xVyNmcKq7lnSd",
                grow: true
              },
              {
                type: 'atomic',
                category: 'pageView',
                label: '滚动页面',
                url:"https://ezprotech.feishu.cn/docx/Jua1ddEdGoNg42xnhOJcKsw8nhc#share-A6kPdIDyJoAPbcxAPHpcrLvTnAg",
                grow: true
              },
            ];
            break;
          case 'function':
            this.widgetConfig = [
              {
                type: 'componentFunction',
                category: 'matrixPage',
                label: '视频矩阵',
              },
              {
                type: 'componentFunction',
                category: 'distributedMatrix',
                label: '分布式矩阵',
              },
              {
                type: 'componentFunction',
                category: 'cameraPage',
                label: '摄像头控制',
              },
              {
                type: 'componentFunction',
                category: 'cameraTrack',
                label: '摄像追踪',
              },
              {
                type: 'componentFunction',
                category: 'meetingList',
                label: '一键入会列表',
              },
              {
                type: 'componentFunction',
                category: 'urlPlayer',
                label: '流媒体播放器',
              },

              {
                type: 'componentFunction',
                category: 'cameraView',
                label: '摄像头预览组件',
              },
              {
                type: 'componentFunction',
                category: 'calendar',
                label: '日历'
              },
              {
                type: 'componentFunction',
                category: 'webView',
                label: '网页',
              },
              {
                type: 'componentFunction',
                category: 'padRelatedRooms',
                label: 'pad关联房间',
              },
              {
                type: 'componentFunction',
                category: 'platformEZLink',
                label: '信息屏组件',
              },
              {
                type: 'componentFunction',
                category: 'imageVideoListPlayer',
                label: '图片轮播器',
              },
              {
                type: 'componentFunction',
                category: 'sipCall',
                label: '一键呼叫',
                grow: true,
              },
              {
                type: 'componentFunction',
                category: 'serviceCall',
                label: '会议服务',
                grow: true,
              },
            ];
            break;
          default:
            break;
        }
        this.widgetConfig.forEach(config => config.isFromPicker = true);
      },
      updateTimeValue() {
        this.timeValue = moment().format(momentFormat.time);
      },
      startTimer() {
        this.timer = setInterval(() => {
          this.updateTimeValue();
        }, 60000);
      },
      dragStart(widget) {
        this.updateDraggingWidget(widget);
      },
      dragEnd() {
        this.updateDraggingWidget(undefined);
      }
    }
  };
</script>

<style scoped lang="less">
  .widget-picker-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    box-sizing: border-box;

    .widget-picker-content {
      box-sizing: border-box;
      position: relative;
      background: #F0F1F5;
      border: 1px #F0F1F5 solid;
      border-radius: 4px;

      &:hover {
        border: 1px @colorPrimary dashed;
      }

      .widget-picker-item {
        height: 85px;
        min-width: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .widget-picker-mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: transparent;
        cursor: all-scroll;
        z-index: 9999;
      }
    }

    .level-item {
      transform: rotate(270deg);
    }

    &::-webkit-scrollbar {
      display: none;
    }

    /deep/ .el-progress-bar__outer {
      background: #DADCE5 !important;
    }

  }
</style>
